<style lang="less">
    @import './own-space.less';
</style>

<template>
    <div>
        <Card>
            <p slot="title">
                <Icon type="person"></Icon>
                个人信息
            </p>
            <div>
                <Form :model="userForm" :label-width="100" label-position="right">
                    <FormItem label="用户姓名：" prop="name">
                        {{userForm.name}}
                    </FormItem>
                    <FormItem label="登录密码：">
                      ******
                    </FormItem>
                    <div>
                        <Button type="primary" style="width: 100px;" class="margin-left-30" @click="showEditPassword">修改密码</Button>
                    </div>
                </Form>
            </div>
        </Card>
        <Modal v-model="editPasswordModal" :closable='false' :mask-closable=false :width="800" :loading="savePassLoading">
            <h3 slot="header" style="color:#2D8CF0">修改密码</h3>
            <Form ref="editPasswordForm" :model="editPasswordForm" :label-width="100" label-position="right"
                  :rules="passwordValidate">
                <FormItem label="原密码" prop="oldPassword" :error="oldPassError">
                    <Input v-model="editPasswordForm.oldPassword" placeholder="请输入现在使用的密码"></Input>
                    <p class="ivu-form-item-error-tip" v-show="changeError">原密码不正确，请重新输入</p>
                </FormItem>
                <FormItem label="新密码" prop="newPassword">
                    <Input v-model="editPasswordForm.newPassword" placeholder="请输入新密码，至少6位字符"></Input>
                </FormItem>
                <FormItem label="确认新密码" prop="confirmPassword">
                    <Input v-model="editPasswordForm.confirmPassword" placeholder="请再次输入新密码" type="password"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelEditPass">取消</Button>
                <Button type="primary"  @click="saveEditPass">修改</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
  export default {
    name: 'ownspace_index',
    data () {
      const valideRePassword = (rule, value, callback) => {
        if (value !== this.editPasswordForm.newPassword) {
          callback(new Error('两次输入密码不一致'));
        } else {
          callback();
        }
      };
      return {
        userForm: {
          name: ''
        },
        changeError:false,
        editPasswordModal:false,
        savePassLoading:true,
        oldPassError: '',
        editPasswordForm: {
          oldPassword: '',
          newPassword: '',
          confirmPassword: ''
        },
        passwordValidate: {
          oldPassword: [
            {required: true, message: '请输入原密码', trigger: 'blur'}
          ],
          newPassword: [
            {required: true, message: '请输入新密码', trigger: 'blur'},
            {min: 6, message: '请至少输入6个字符', trigger: 'blur'},
            {max: 32, message: '最多输入32个字符', trigger: 'blur'}
          ],
          confirmPassword: [
            {required: true, message: '请再次输入新密码', trigger: 'blur'},
            {validator: valideRePassword, trigger: 'blur'}
          ]
        },
      };
    },
    methods: {
      showEditPassword () {
        this.editPasswordModal = true;
      },
      cancelEditPass () {
        this.editPasswordModal = false;
        this.editPasswordForm = {}
         this.changeError = false
        this.$refs['editPasswordForm'].resetFields()
      },
      saveEditPass () {
        this.$refs['editPasswordForm'].validate((valid) => {
          if(valid) {
            this.$http.put('/sys/password',this.editPasswordForm).then((res) => {
              if(res.data.message === '原密码不正确！') {
                this.editPasswordModal = true
                this.changeError = true
              }else {
                this.$Message.success('密码修改成功，请重新登陆')
                this.editPasswordModal = false
                this.$router.push({
                   name:'login'
                 })
              }
            }).catch(() => {
              this.$Message.error('修改失败，请稍后重试')
            })
          }else {
            this.savePassLoading = false
            this.$nextTick(() => {
              this.savePassLoading = true
            })
          }
        })
      },
      init () {
        this.userForm.name = this.$auth.user().name;
      },
    },
    mounted () {
      this.init();
    }
  };
</script>
